<template>
  <el-container>
    <el-main>
      <el-form ref="sysMenuForm" :model="form" :rules="rules" label-width="80px">
        <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
          <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">基本信息</span>
        </div>
        <el-form-item label="分类名称" prop="name">
          <el-col :span="12">
            <el-input v-model="form.name" />
          </el-col>
        </el-form-item>
        <el-form-item label="排序">
          <el-col :span="12">
            <el-input v-model="form.orders" />
          </el-col>
        </el-form-item>
        <el-form-item  label="上级分类">
          <el-col :span="12">
            <el-input v-model="topName" suffix-icon="el-icon-search" @focus="dialogShow" />
          </el-col>
        </el-form-item>
        <el-form-item label="分类图标" prop="permission">
          <el-col :span="12">
              <single-upload v-model="form.thumbnail"></single-upload>
          </el-col>
        </el-form-item>
        <!-- <el-form-item label="菜单类型" prop="menuType">
          <el-col :span="12">
            <el-select v-model="form.menuType" placeholder="请选择类型">
              <el-option label="菜单" value="0" :disabled="typeOneDisabled" />
              <el-option label="功能" value="1" :disabled="typeTwoDisabled" />
            </el-select>
          </el-col>
        </el-form-item> -->
        <!-- <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
          <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">其他信息</span>
        </div> -->
        <!-- <el-form-item  label="图标" prop="icon">
          <el-col :span="12">
            <el-input v-model="form.icon"/>
          </el-col>
        </el-form-item> -->
        <!-- <el-form-item label="链接" prop="url">
          <el-col :span="12">
            <el-input v-model="form.url"/>
          </el-col>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary"  :loading="clicked" @click="saveSysMenu('sysMenuForm')">&nbsp&nbsp完 成&nbsp&nbsp</el-button>
        </el-form-item>
      </el-form>
      <menu-dialog ref="menuDialog" @confirm="dialogConfirm" />
    </el-main>
  </el-container>
</template>
<style scoped>
</style>
<script>
  import {EventBus} from '@/api/eventBus'
  import utils from '../../utils/utils.js'
  // import MenuDialog from './components/MenuDialog'
  // import MenuDialog from './components/MenuDialog'
  import MenuDialog from './components/MenuDialog'
    import SingleUpload from '@/components/Upload/singleUpload'
  import {save} from '@/api/memberCategory'
  export default {
    name: 'memberCategory-add',
    filters: {},
    components: {
      MenuDialog,SingleUpload
    },
    data() {
      return {
        id: '',
        clicked: false, // 按钮防双击
        topName: '',
        typeOneDisabled: false, // 公司类型是否禁用
        typeTwoDisabled: false, // 部门类型是否禁用
        form: {

        },
        rules: {
          name: [
            {required: true, message: '请输入菜单名称', trigger: 'blur'},
            {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
          ],
        }
      }
    },
    created() {
      console.log(this.$route.query.rowData)
      this.id = this.$route.query.rowData.id
      if (!utils.isNull(this.$route.query.rowData.id)) {
        this.topName = this.$route.query.rowData.name;
        this.form.parentId = this.$route.query.rowData.id;
        // this.form.dataSort = this.$route.query.rowData.childrens.length+1;
      } else {
        console.log('根结点')
        this.typeTwoDisabled = true;
        // this.form.dataSort = this.$route.query.dataSort+1;
      }
      console.log(this.form.dataSort)
    },
    watch:{ // 路由地址不变的情况下,如果id变化则重新获取数据
      $route (newVal, oldVal) {
        if (newVal.name=='memberCategory-add' && newVal.query.rowData.id!=this.id) {
          this.id = newVal.query.rowData.id
          if (!utils.isNull(this.$route.query.rowData.id)) {
            this.topName = this.$route.query.rowData.name;
            this.form.parentId = this.$route.query.rowData.id;
            // this.form.dataSort = this.$route.query.rowData.childrens.length+1;
          } else {
            console.log('根结点')
            this.typeTwoDisabled = true;
            // this.form.dataSort = this.$route.query.dataSort+1;
          }
        }
      }
    },
    methods: {
      dialogShow() {
        this.$refs.menuDialog.show()
      },
      dialogConfirm(val) {
        // this.form.dataSort = val.childrens.length +1;
        this.form.parentId = val.id;
        this.topName = val.name;
        this.typeOneDisabled = false;
        this.typeTwoDisabled = false
      },
      saveSysMenu(form) {
        const _this = this
        this.$refs[form].validate((valid) => {
          if (valid) { // 校验表单
            _this.clicked = true
            save(_this.form).then(response => {
              console.log(response)
              _this.clicked = false
                EventBus.$emit('memberCategory-add', response.data)
                _this.$store.dispatch('tagsView/delView', _this.$route).then(({visitedViews}) => {
                  _this.$router.push({
                    path: '/memberCategory/list'
                  })
                })// 关闭当前tab回到列表
            }).catch(error => {
              _this.clicked = false
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
</script>
